import * as React from "react";
import DataGrid from "../../../../components/data-grid";
import Icons from "../../../../components/icons";
import {Link, Route} from "react-router-dom";
import UserEditPage from "./edit";

export default class UserManagePage extends React.Component{
    constructor(props) {
        super(props);
        document.title = "用户管理";
        this.userFields = [
            {title: "#", formatter: DataGrid.formatters.LINE_NUMBER},
            {title: "用户名", key: "username", searchable: true, className: "text-center"},
            {title: "昵称", key: "nickname", display: false},
            {title: "手机号", key: "phone", searchable: true},
            {title: "邮箱", key: "email", searchable: true},
            {title: "到期时间", key: "accountExpiredDate", formatter: DataGrid.formatters.DATE, searchable: true, sortable: true},
            {title: "创建时间", key: "createdDate", formatter: DataGrid.formatters.DATE, searchable: true, sortable: true},
            {title: "修改时间", key: "lastModifiedDate", formatter: DataGrid.formatters.DATE, searchable: true, sortable: true},
            {title: "锁定", key: "locked", formatter: DataGrid.formatters.BOOLEAN, sortable: true},
            {title: "启用", key: "enabled", formatter: DataGrid.formatters.BOOLEAN, sortable: true},
        ];
        this.actions = [
            <Link to={this.props.match.path + "/new"}><Icons.plus style={{fill: "white"}}/></Link>,
            {type: DataGrid.actionType.DELETE, disabledOnNoneSelected: true},
            <button disabledonnoneselected="true"><Icons.pencil style={{fill: "white"}}/></button>,
            {type: DataGrid.actionType.REFRESH},
            {type: DataGrid.actionType.CONFIG},
        ];
    }

    render() {
        return <>
            <Route path={this.props.match.path + "/"} exact component={()=>
                <DataGrid fields={this.userFields} actions={this.actions} multipleSort={false}/>
            } />
            <Route path={this.props.match.path + "/:id"} component={()=><UserEditPage/>}/>
        </>
    }
}
